<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <!-- M(数据) - V(视图) - VM(视图和数据联系起来) -->
</head>

<body>
    <div id='app'>
        <h1> {{msg}} </h1>
        <!-- v-model 是将数据和视图进行关联，数据发生改变会更新视图，反之相同 -->
        <input type="text" v-model.lazy="msg" placeholder="请输入内容">

        <textarea v-model.trim="msg" placeholder="请输入内容"></textarea>

        <div>
            <h1>复选框</h1>
            是否同意该协议
            <input v-model="checkbox" true-value="同意" false-value="不同意" type="checkbox">
            <label> {{checkbox}} </label>
        </div>

        <div>
            <h1>多个复选框</h1>
            <!-- 
                多个复选框的时候，绑定的值一定要是一个数组,每个输入框要定义一个不同的 value 值
             -->
            <input type="checkbox" v-model="checkboxList" value="🍉"> 🍉
            <input type="checkbox" v-model="checkboxList" value="🍇"> 🍇
            <input type="checkbox" v-model="checkboxList" value="🍌"> 🍌
            <input type="checkbox" v-model="checkboxList" value="🍐"> 🍐
            <input type="checkbox" v-model="checkboxList" value="🍑"> 🍑

            <p>{{checkboxList}}</p>
        </div>

        <div>
            <h1>单选</h1>


            <input type="radio" id="one" value="男" v-model="sex" />
            <label for="one">男</label>

            <input type="radio" id="two" value="女" v-model="sex" />
            <label for="two">女</label>
            <p>你选择的是： {{sex}} </p>
        </div>


        <div>
            <h1>选择器</h1>
            <p>你选择的是：{{selected}} </p>

            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option>薯条</option>
                <option>牛肉汤</option>
                <option>黄焖鸡</option>
            </select>
        </div>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                msg: '你好',
                checkbox: '不同意',
                checkboxList: [],
                sex: '',
                selected: ''
            }
        },
        methods: {},
    }
    // 将视图和数据关联起来的实例
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>